<template>
	<view :class="isAllOpen?'isFixed':''">
		<!-- 页首 -->
		<zw-header></zw-header>
		<view style="background: #fff;">
			<view class="goods">
				<view class="imgBox">
					<view class="imgBody">
						<view class="smallImg">
							<view calss="imageMenu">
								<view class="scroll__item" :id="'date_' + i" @mouseover="change(i,url)"
									:class="chooseImg == url?'scroll__act':''" v-for="(url, i) in details.mainImageUrl.split(',')"
									:key="i" v-if="i<6"> 
									<image :src="url" mode="aspectFill"></image>
								</view>
								
							</view>
						</view>
						<magnifier :middleImg='chooseImg' v-if="current==0"></magnifier>
						<view id="mui-player" v-if="current==1"></view>
						
					</view>
					<view class="imgTab">
						<u-subsection height='80' :list="list" @change="changeTab" :current="current" style="width: 120px;" ></u-subsection>
					</view>
				</view>
				<view class="goodsMain">
					<view class="goodsInfo">
						<view class="vipBox">
							<view class="vipRow">
								<image src="/static/image/vip.png"></image>
								开通会员，本单可享9折优惠
							</view>
							<view class="vipRow">
								<text>去开通</text>
							</view>
						</view>
						<view class="goodsTit"><text>{{details.name}}</text></view>
						<view class="goodsTag"><text>超100人加购</text><text v-if="details.sellNum>0">多条五星评价</text></view>
						<view class="goodsPrice">
							<view class="price" ><text>￥<text class="bgPrice">{{specsData.price}}</text></text></view>
							<view class="sellNum">
								<view class="sellBox">已售 {{details.sellNum || 0}}</view>
							</view>
						</view>
						<view class="scrollBox">
							<view class="skuBox">
								<view class="skuName">配送</view>
								<view class="skuInfo">
									<text class="greText">付款后48小时内发货</text>
									<text>快递: 免运费</text>
								</view>
							</view>
							<view class="skuBox">
								<view class="skuName">保障</view>
								<view class="skuInfo">
									<text>7天无理由退换</text>
									<view class="skuline"></view>
									<text>极速退款</text>
								</view>
							</view>
							<view class="skuBox">
								<view class="skuName">可选支付</view>
								<view class="skuInfo">
									<text>支付宝支付</text>
								</view>
							</view>
							<view class="skuZw"></view>
							<view class="skuBox" v-for="(sku,i) in skus" :key='i'>
								<view class="skuName" :class="sku.name.length > 4?'skuLong':''">{{sku.name}}</view>
								<view class="specsBox">
									<view class="specsDetail-specs" v-for="(item,index) in skus[i].leaf"
										:key="index" :class="[item.check?'specsSelect':'']"
										@click="choiceSpecs(i,index,item)">
										<text>{{item.name}}</text>
									</view>
								</view>
							</view>
							<view class="skuBox">
								<view class="skuName">购买数量</view>
								<view class="numBox">
									<view class="numBtn" @click="getRemove()"><u-icon name="minus" size='30'
											style="color: #707070;"></u-icon></view>
									<view class="centerNum">
										<input v-model="payNum" type="number" @blur="onBlur" />
									</view>
									<view class="numBtn" @click="getAdd()"><u-icon name="plus" size='30'
											style="color: #707070;"></u-icon></view>
								</view>
							</view>
						</view>
					</view>
					<view class="goodsBtn" v-if='specsData.stock>0'>
						<view class="btnBox" >
							<view class="buyBtn" @click="toBuy">立即购买</view>
							<view class="cartBtn" @click="addCart">加入购物车</view>
						</view>
						<view class="goodsStar" v-if='follow' @click="getCancelGoods()()">
							<image src="../../static/image/common/starOn.png">已收藏</image>
						</view>
						<view class="goodsStar" v-else @click="getTuck()">
							<image src="../../static/image/common/star.png">收藏</image>
						</view>
					</view>
					<view class="goodsBtn" v-else>
						<view class="noStock btnBox">暂无库存</view>
					</view>
				</view>
			</view>
			<!-- <view class="sketchBox">
				<view class="sketchText" :class="sketch==0?'sketchFlag':''" @click="sketch = 0">商品详情</view>
				<view class="sketchLine"></view>
				<view class="sketchText" :class="sketch==1?'sketchFlag':''" @click="sketch = 1">商品评价
				</view>
			</view> -->
			<view class="goods-sketch">
				<view class="sketchBody">
					<!-- 商品评价 -->
					<evaluate ref="comment" :goodsId="id" @openPopup='openPopup'></evaluate>
					<!-- 商品详情 -->
					<detail :details='details'></detail> 
					
				</view>
				<view class="miniBuy" v-bind:class="[scrollTop > 600 ? 'miniBuyActive' : '', '']">
					<view class="miniGoods">
						<image :src="chooseImg" mode="aspectFit" @mouseover="miniImg = true" @mouseleave="miniImg = false;"></image>
						<view class="miniPrice" ><text>￥<text class="miniPriceBig">{{specsData.price}}</text></text></view>
					</view>
					<image :src="chooseImg" v-if='miniImg' class="miniImg" mode="aspectFit"></image>
					<view class="skuBox" v-for="(sku,i) in skus" :key='i'>
						<view class="skuName" :class="sku.name.length > 4?'skuLong':''" >{{sku.name}}</view>
						<view class="specsBox">
							<view class="specsDetail-specs" v-for="(item,index) in skus[i].leaf"
								:key="index" :class="[item.check?'specsSelect':'']"
								@click="choiceSpecs(i,index,item)">
								<text>{{item.name}}</text>
							</view>
							
						</view>
					</view>
					<view class="skuBox">
						<view class="skuName">购买数量</view>
						<view class="numBox">
							<view class="numBtn" @click="getRemove()"><u-icon name="minus" size='30'
									style="color: #707070;"></u-icon></view>
							<view class="centerNum">
								<input v-model="payNum" type="number" @blur="onBlur" />
							</view>
							<view class="numBtn" @click="getAdd()"><u-icon name="plus" size='30'
									style="color: #707070;"></u-icon></view>
						</view>
					</view>
					<view class="miniBtn">
						<view class="miniBtnBox" v-if='specsData.stock>0'>
							<view class="miniPay" @click="toBuy">立即购买</view>
							<view class="miniCart" @click="addCart">加入购物车</view>
						</view>
						<view class="noStock miniBtnBox" v-else>暂无库存</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 导航栏 -->

		


		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import pagination from '../../components/common/pagination.vue'
	import evaluate from '@/components/goods/evaluate.vue';
	import detail from '@/components/goods/detail.vue';
	import Magnifier from '@/components/magnifier.vue';
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player';
	import Hls from 'hls.js';
	import {
			encrypt,
			decrypt
		} from '@/utils/jsencrypt';
	import {
		getAccToken
	} from '@/userToken.js'
	export default {
		components: {
			pagination,
			evaluate,
			Magnifier,
			detail,
		},
		data() {
			return {
				list: [
					{name: '图集'}, 
					{name: '视频'}, 
				],
				specificationsValues: [],
				specList: [],
				skus: [], //规格数组
				specs: '',//选择的规格id字符串
				specsData: {}, //用户选中具体规格
				sketch: 0,
				details: {
					mainImageUrl: ',',
					logo: ',',
					specList: [],
				},
				scrollTop: 0,
				chooseImg: '',
				payNum: 1,
				pageNum: 1,
				totalSize: 12,
				id: '',//商品id
				userInfo: '',
				follow: false,//收藏判断
				miniImg:false,//mini大图展示控制
				miniShow:false,//mini展示控制
				isAllOpen:false,//是否打开评价
				current:0,//0图片 1视频
				mp:null,
			}
		},
	    onUnload(){
		  this.mp.destroy()
		},
		onLoad(e) {
			if (!e.id) {
				uni.redirectTo({
					url: '/pages/index'
				});
				return;
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.id = e.id;
			// if (this.userInfo.id) {
			// 	this.getList(e.id)
			// }
			this.findGoodsDetail(e.id);
			
			
		
		},
		mounted() {
			this.$refs.comment.getComment();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			changeTab(index){
				var title = this.details.name;
				this.current = index;
				if(index == 1){
					//视频初始化
					this.$nextTick(()=>{
					  this.mp = new MuiPlayer({
						  container:document.getElementById("mui-player"),
						  width:550,
						  title:title,
						  volume:0.4,
						  themeColor:'#ff5000',
						  src:'https://mp-67efbf2d-f615-4e09-97d8-20085f49d724.cdn.bspapp.com/cloudData/video.mp4',
						  // src:'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
						  // parse:{
							 //  type:'hls',
							 //  loader:Hls,
							 //  config:{ // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
								//   debug:false,
							 //  },
						  // },
						  
					  });
					})
				}else{
					this.mp.destroy()
				}
			},
			// 数量框处理用户手动输入的情况
			onBlur(event) {
				let val = 0;
				let value = event.detail.value;
				// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
				// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
				if (!/(^\d+$)/.test(value) || value[0] == 0) val = 1;
				val = +value;
				if (val > this.specsData.stock) {
					val = this.specsData.stock;
				} else if (val < 1) {
					val = 1;
				}
				this.payNum = val;

			},
			//鼠标经过事件
			change(index, url) {
				this.chooseImg = url
			},
			
			//查询购物车数量
			getNum() {
				this.uni_request({
					url: '/user/cart/number',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.resetSetItem('sellerCartNum', res.data.data);
							this.$forceUpdate()
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			
			//查询规格详情
			getSku(id){
				var that = this;
				uni.request({
					url: that.serverUrl + '/goods/spu/' + id,
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						uni.hideLoading()
						that.specs = []
						if (res.data.code == 0 || res.data.code == 200) {
							that.skus = res.data.data
							//插入check值控制渲染
							for (var i = 0; i < that.skus.length; i++) {
								for (var q = 0; q < that.skus[i].leaf.length; q++) {
									if(q==0){
										//默认选择规格
										that.skus[i].leaf[q].check = true;
										that.specs.push(that.skus[i].leaf[q].valueId)
									}else{
										that.skus[i].leaf[q].check = false
									}
								}
							}
							
							setTimeout(() => {
								var chooseSku = String(that.specs)
								for (var j = 0; j < that.details.skus.length; j++) {
									if (chooseSku == that.details.skus[j].skuValueIds) {
										that.specsData = that.details.skus[j];
										that.chooseImg = that.specsData.images
									}
								}
							}, 10);
						} else {
							this.$alert('当前商品不存在或已下架', {
								cancelText: '返回首页',
								confirmText: '看看其它商品'
							}, () => {
								uni.redirectTo({
									url: '/pages/goods/discountList'
								});
							}, () => {
								uni.redirectTo({
									url: '/pages/index'
								});
							});
						}
					}
				})
			},
			
			//查询商品详情
			findGoodsDetail(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.request({
					url: this.serverUrl + '/goods/' + id,
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.details = res.data.data
							this.chooseImg = String(res.data.data.mainImageUrl).split(',')[0]
							this.getSku(id)
							setTimeout(() => {
								// 修改网站标题
								uni.setNavigationBarTitle({
									title: `${res.data.data.name} - 商城`
								});

							}, 100);
						} else {
							this.$alert('当前商品不存在或已下架', {
								cancelText: '返回首页',
								confirmText: '看看其它商品'
							}, () => {
								uni.redirectTo({
									url: '/pages/goods/discountList'
								});
							}, () => {
								uni.redirectTo({
									url: '/pages/index'
								});
							});
						}
					}
				})

			},
			// 规格选择
			choiceSpecs(i, index, item) {
				let that = this;
				for (var t = 0; t < that.skus[i].leaf.length; t++) {
					that.skus[i].leaf[t].check = false
				}
				that.skus[i].leaf[index].check  = true;
				var allChoose = true; //所有类别规格是否都已选择
				var chooseSku = [];
				for (var p = 0; p < that.skus.length; p++) {
					for (var q = 0; q < that.skus[p].leaf.length; q++) {
						if(that.skus[p].leaf[q].check){
							//默认选择规格
							chooseSku.push(that.skus[p].leaf[q].valueId)
						}
					}
				}
				setTimeout(() => {
					if (chooseSku.length == that.details.skus[0].specs.length) {
						that.specs = chooseSku.toString()
						for (var j = 0; j < that.details.skus.length; j++) {
							if (that.specs == that.details.skus[j].skuValueIds) {
								that.specsData = that.details.skus[j]
								that.chooseImg = that.specsData.images
								that.$forceUpdate()
							}
						}
					}
				}, 10);
				

			},
			// 购物车添加
			addCart() {
				if (!getAccToken()) {
					uni.navigateTo({
						url: '/pages/user/login/index'
					})
					return
				}
				if (!this.specsData.skuId) {
					if (this.specsData.stock == 0) {
						uni.showToast({
							icon: 'none',
							title: '该商品缺货'
						})
						return false
					}
				} else {
					uni.showLoading({
						title: "添加中...",
					})
					this.uni_request({
						url: '/user/cart',
						method: 'POST',
						data: {
							skuId: this.specsData.skuId,
							productId: this.specsData.productId,
							quantity: this.payNum
						},
						success: (res) => {
							if (res.data.code == 0 || res.data.code == 200) {
								uni.hideLoading()
								this.getNum()
								uni.showToast({
									title: '添加成功',
									icon: "none"
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						}
					})
				}

			},
			// 购买
			toBuy() {
				if (!getAccToken()) {
					uni.navigateTo({
						url: '/pages/user/login/index'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/order/checkout?id=' + this.specsData.skuId +  '&payNum=' + this.payNum + '&goodsId=' + this.specsData.productId 
				})
			},
		
			getAdd(num) {
				if(num && num > 1 && this.userInfo.typePurpleSpread ==1){
					if (this.payNum < num) {
						this.payNum++
					} else {
						uni.showToast({
							icon: 'none',
							title: '已达限购'
						})
					}
				}else{
					if (this.payNum < this.specsData.stock) {
						this.payNum++
					} else {
						uni.showToast({
							icon: 'none',
							title: '库存不足'
						})
					}
				}
				
			},
			getRemove() {

				if (this.payNum > 1) {
					this.payNum--
				} else {
					uni.showToast({
						icon: 'none',
						title: '最低购买一件'
					})
				}
			},
			// 乐购商品收藏
			getTuck() {
				this.uni_request({
					url: '/user/userFollowProduct/follow/discount/' + this.id,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.follow = true
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			// 乐购商品取消收藏
			getCancelGoods() {
				this.uni_request({
					url: '/user/userFollowProduct/cancel/discount/' + this.id,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.follow = false
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			// 乐购商品收藏列表
			getList() {
				this.uni_request({
					url: '/user/userFollowProduct/follow/exist/0/' + this.id,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							if (res.data.data == 0) {
								this.follow = false
							} else {
								this.follow = true
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			
			//点击打开所有评价抽屉
			openPopup(e){
				if(e=='open'){
					this.isAllOpen = true
				}else{
					this.isAllOpen = false
				}
				
			},


		},

	}
</script>

<style lang="scss">
	.m-player{
		height: 550px !important;
		border-radius: 5px !important;
	}
	.isFixed{
		overflow-y: hidden !important;
		height: calc(100vh + 300px);
	}
	.tag {
		font-size: 12px;
		color: rgb(82,51,2);
		
		background: linear-gradient(to bottom, rgb(254,241,197), rgb(248,231,159));
		text-align: center;
		padding: 1px 5px;
		border-radius: 10px 5px 5px 0;margin-left: 10px;
		text{
			text-decoration:line-through;
		}
	}
	.spec-preview {
		position: relative;
		width: 400px;
		height: 400px;
		border: 1px solid #ccc;
		.spec-preview img {
			width: 100%;
			height: 100%;
		}

		.event {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 998;
		}

		.mask {
			width: 50%;
			height: 50%;
			background-color: rgba(0, 255, 0, 0.3);
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}

		.big {
			width: 100%;
			height: 100%;
			position: absolute;
			top: -1px;
			left: 100%;
			border: 1px solid #aaa;
			overflow: hidden;
			z-index: 998;
			display: none;
			background: white;

			.big img {
				width: 200%;
				max-width: 200%;
				height: 200%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.event:hover~.mask,
		.event:hover~.big {
			display: block;
		}
	}

	.sketchBox {
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 15px 8vw ;
		@extend %flex-align-center;
		height: 40px;
		.sketchText {
			width: 130px;
			height: 40px;
			justify-content: center;
			font-size: 16px;
			cursor: pointer;
			@extend %flex-align-center;
			border-bottom: 2px solid #fff;
		}
		.sketchLine {
			width: 1px;
			height: 25px;
			background: #c1c1c1;
		}
		.sketchText:hover {
			color: $color-primary;
		}
		.sketchFlag {
			border-bottom: 2px solid $color-primary;
			color: $color-primary;
		}
	}

	.goods {
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}
		max-width: $page-width;		min-width: $page-minwidth;
		padding: 10px 0;
		margin: 0 8vw;
		min-height: 500px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.goodsMain {
			width:calc(100% - 700px);
			.goodsBtn {
				margin-top: 30px;
				@extend %flex-align-center;
				justify-content: flex-start;
				position: relative;
				.goodsStar {
					margin-left: 20px;
					color: #999;
					@extend %flex-align-center;
					image {
						width: 20px;
						height: 20px;
						margin-right: 2px
					}
				}
				.goodsStar:hover {
					color: $color-primary;
				}
				.btnBox {
					@extend %flex-align-center;
					justify-content: center;
					width:60%;
					height: 45px;
					font-size: 17px;
					font-weight: bold;
					color: #fff;
					letter-spacing: 1px;
					cursor: pointer;
					.cartBtn{
						height: 100%;
						background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
						vertical-align: top;justify-content: center;
						width: 150px;@extend %flex-align-center;
						border-radius: 0 10px 10px 0;
					}
					.buyBtn{
						width: calc(100% - 150px);justify-content: center;
						background: linear-gradient(90deg, rgb(255, 100, 34), rgb(255, 0, 64));
						vertical-align: top;@extend %flex-align-center;height: 100%;
						border-radius: 10px 0 0 10px;
					}
				}
				
			}
			.goodsInfo {
				width: 100%;
				.scrollBox {
					min-height: 240px;
					margin-top: 5px;
					

				}
				.vipBox{
					background: rgb(250, 231, 212);
					margin: 0 0 15px 0;
					border-radius: 5px;@extend %flex-align-center;
					justify-content: space-between;
					height: 40px;width: 100%;
					padding: 0 10px;
					image{height: 20px;width: 20px;margin-right: 8px;}
					.vipRow{
						color:#00003d !important;font-size: 14px;font-weight: bold;
						text{
							@extend %flex-align-center;letter-spacing: 1px;
							font-size: 13px;background: #00003d;height: 27px;padding: 0 10px;border-radius: 5px;color:#eeefff;
						}
						@extend %flex-align-center;
					}
				}
				.goodsTit {
					line-height: 26px;
					color: #333;
					cursor: text;
					font-size: 20px;
					// font-family: PingFangSC-Semibold;
					font-weight: 600;
					letter-spacing: 0;
					line-height: 30px;
				}
				.goodsTag{
					@extend %flex-align-center;
					margin-top: 10px;
					text{
						background-color: #f7f7f7;
						border-radius: 4px;
						color: #7a7a7a;
						font-size: 14px;
						font-weight: 500;
						height: 28px;
						@extend %flex-align-center;
						line-height: 28px;
						margin-right: 10px;
						padding: 0 8px;
					}
				}
				.goodsPrice {
					height: 75px;
					@extend %flex-align-center;
					.price {
						font-size: 16px;
						font-weight: 600;
						color: $color-primary;
						display: flex;align-items: center;
						.bgPrice {
							font-size: 30px;
						}
					}
					.sellNum {
						@extend %flex-align-center;
						font-size: 15px;
						margin-left: 10px;
						color: #999;
					}

				}
			}
		}
		.imgBox {
			width: 650px;
			@extend %flex-align-center;
			flex-direction: column;
			.imgTab{
				margin-top: 20px;
				cursor: pointer;
			}
			.imgBody{
				@extend %flex-align-center;
				align-items: flex-start !important;
			}
			.smallImg {
				@extend %flex-align-center;
				flex-direction: column;
				width: 85px;
				margin-right: 15px;
				.scrollbutton {
					cursor: pointer;
					height: 25px;
					@extend %flex-align-center;
					justify-content: center;
					width: 85px;
					background: #e0e0e0;
				}

				.imageMenu {
					width: 85px;
					@extend %flex-align-center;
					flex-direction: column;
				}
				.scroll__item {
					height: 85px;
					width: 85px;
					cursor: pointer;
					overflow: hidden;
					margin-bottom: 8px;
					border: 2px solid #fff;
					border-radius: 8px;
				}
				.scroll__item:hover{
					border: 2px solid $color-primary;
				}
				.scroll__act {
					border: 2px solid $color-primary;
				}

				image {
					width: 100%;
					height: 100%;
					ertical-align: bottom;
					display: block;
				}
			}


		}

	
	}

	.noStock {
		background-color: #d8d8d8;
		color: #999 !important;
		border: none;
		width: 100%;border-radius: 8px;
	}
	.skuZw{height: 20px;width: 100px;}
	.skuBox {
		display: flex;
		align-items: flex-start;
		.skuName {
			width: 60px;
			margin: 0 15px;
			padding: 9px 0;
			color: #888;
			text-align-last:justify;
		}
		.skuLong{
			text-align-last: auto !important;  
			padding: 0px 0px 9px 0 !important;
		}
		.skuInfo{
			margin-right: 15px;
			padding: 9px 0 8px 0;font-size: 14px;
			text{margin-right: 8px;color: #444444;letter-spacing: 1px;}
			@extend %flex-align-center;
		}
		.skuline{height: 10px;width: 1px;background: #eee;margin-right: 8px}
		
		.numBox {
			@extend %flex-align-center;
			.numBtn {
				width: 37px;
				height: 37px;
				@extend %flex-align-center;
				justify-content: center;
				border: 1px solid #d3d3d3;
				cursor: pointer;
			}
	
			.centerNum {
				@extend %flex-align-center;
				justify-content: center;
				width: 60px;
				height: 37px;
				border: 1px solid #d3d3d3;
				border-left: none;
				border-right: none;
				input {
					text-align: center;
				}
			}
		}
		.specsBox {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			width: calc(100% - 75px);
			.specsDetail-specs {
				padding: 8px 12px;
				border: 1px solid #d3d3d3;
				margin-bottom: 20px;
				margin-right: 15px;
				cursor: pointer;
				position: relative;
				border-radius: 5px;
				image {
					width: 30px;
					height: 30px;
					position: absolute;
					right: -4px;
					bottom: -4px;
				}
			}
			.specsSelect {
				border: 1px solid $color-primary;
				color:$color-primary;
			}
		}
	}
	.goods-sketch {
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 30px 8vw 0 8vw;
		min-height: 400px;
		@extend %flex-align-center;
		justify-content: space-between;
		
		.miniBuyActive {opacity: 1 !important;transform: translateY(-25px) translateX(0) !important;top: 140px !important;} 
		.miniBuy{
			width: 420px;background: #fff;
			transform: translateY(100px) translateX(0);
			opacity: 0;
			transition: all .5s ease 0s;
			padding: 15px;
			border: 1px solid #ebebeb;
			border-radius: 12px;
			box-shadow: 0 6px 20px 0 rgba(0, 17, 51,0.2);
			position: fixed;right: 8vw;top: 100vh;z-index: 20;
			.miniImg{
				height: 500px;width: 500px;position: absolute;left: -510px;top: 0;z-index: 23;
				border: 1px solid #ebebeb;border-radius: 8px;background: #ebebeb;
			}
			.miniGoods{
				@extend %flex-align-center;margin-bottom: 20px;
				image{width: 80px !important;height: 80px !important;border-radius: 10px;cursor: pointer;}
				.miniPrice{
					color: $color-primary;
					font-size: 16px;line-height: 24px; margin-left: 10px;vertical-align: baseline;
					.miniPriceBig{
						font-size: 28px;line-height: 28px; vertical-align: baseline;
					}
				}
				
				text{}
			}
			.miniBtn{
				width: 100%;
				
				.miniBtnBox {
					@extend %flex-align-center;
					justify-content: center;
					width:100%;
					margin-top: 30px;
					font-size: 16px;
					font-weight: bold;
					color: #fff;
					letter-spacing: 1px;
					cursor: pointer;
					height: 40px;
					.miniCart{
						background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
						vertical-align: top;justify-content: center;
						width: 50%;@extend %flex-align-center;
						border-radius: 0 10px 10px 0;height: 100%;
					}
					.miniPay{
						width: 50%;justify-content: center;
						background: linear-gradient(90deg, rgb(255, 100, 34), rgb(255, 0, 64));
						vertical-align: top;@extend %flex-align-center;
						border-radius: 10px 0 0 10px;height: 100%;
					}
				}
			}
		}
		.sketchBody{
			width: calc(100% - 550px);
			.title {
				@extend %flex-align-center;
				font-size: 17px;
				font-weight: bold;
			}
			
			.dot {
				width: 5px;
				height: 5px;
				border-radius: 50px;
				background-color: #000;
				margin-right: 5px;
			}
			
			::v-deep img {
				width: 100%;
				margin-top: -4px;
				object-fit: cover;
			}
		}
		
	}
	.goodsCmpTit{
		color: #11192d;
		// font-family: PingFangSC-Semibold;
		font-size: 20px;
		font-weight: 600;
		line-height: 20px;
		margin-bottom: 15px;
	}
</style>